<!DOCTYPE html>
<html lang="en">

<head>
  <title>ThingJS Plugin</title>
  <meta charset="UTF-8" />
  <script src="./libs/thing.min.js"></script>
  <script src="./libs/dat.gui.min.js"></script>
</head>

<body style="margin: 0; padding: 0">
  <div id="div3d"></div>
  <script type="module">
    let app = new THING.App()
    let plugin = null;
    let z = 0;
    let loadPlugin = () => {
      app.loadPlugin({
        url: './dist/index.js',
        name: 'testPlugin'
      }).then((ev) => {
        plugin = ev;
      })
    }
    let unloadPlugin = () => {
      app.uninstall('testPlugin');
    }
    let createBoxes = () => {
      plugin.createBoxes(dataObj.rows, dataObj.columns, z);
      z = z + 2;
    }
    let createExportClass = () => {
      let exportBox = new plugin.exports.MyBox({
        position: [-2, -2, z],
        style: {
          color: [1, 0, 0]
        }
      });
      z = z + 2;
    }

    var dataObj = {
      loadPlugin: loadPlugin,
      unloadPlugin: unloadPlugin,
      rows: 5,
      columns: 5,
      createBoxes: createBoxes,
      createExportClass: createExportClass
    }
    const gui = new dat.GUI();
    gui.add(dataObj, 'loadPlugin');
    gui.add(dataObj, 'unloadPlugin');
    gui.add(dataObj, 'rows', 1, 10).step(1);
    gui.add(dataObj, 'columns', 1, 10).step(1);
    gui.add(dataObj, 'createBoxes');
    gui.add(dataObj, 'createExportClass')

  </script>
</body>

</html>